<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        html {
            height: 100%;
        }

        body,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
            width: 100%;
            height: 100%;
            font-size: 12px;
            font-family: "Microsoft Yahei";
        }

        .container {
            position: relative;
            width: 900px;
            height: 100%;
            display: flex;
        }

        .nav {
            flex: 0 0 300px;
            position: relative;
            height: 100%;
            min-height: 200px;
            box-sizing: border-box;
            border: 1px solid #666;
        }

        .nav>.item {
            position: relative;
            margin: 5px;
            background-color: #666;
            line-height: 30px;
            text-align: center;
            color: #fff;
        }

        .select {
            flex: 0 0 300px;
            position: relative;
            position: relative;
            height: 100%;
            min-height: 200px;
            box-sizing: border-box;
            border: 1px solid #666;
        }

        .select>.item {
            position: relative;
            margin: 5px;
            box-sizing: border-box;
            border: 1px solid #666;
            line-height: 30px;
        }

        .select>.item>.line {
            display: flex;
        }

        .show {
            flex: 0 0 300px;
            position: relative;
            position: relative;
            height: 100%;
            min-height: 200px;
            box-sizing: border-box;
            border: 1px solid #666;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="nav" id="nav"></div>
        <div class="select" id="select"></div>
        <div class="show"></div>
    </div>
    <script src="./js/data.js"></script>
    <script>
        var shfh = `<root>
            <root>`

        function init(data) {
            data.forEach(item => {
                createNav(item);
            })
        }

        init(data);
        let globalMaxlevel = [];
        let globalNick = [];
        let globalItem = [];
        let globalDaode = 50;
        let globalJoin = [];


        function createNav(data) {
            const { name, story } = data;

            let navDom = document.getElementById("nav");

            let itemDom = document.createElement("div");
            itemDom.classList.add("item");
            navDom.appendChild(itemDom);
            navDom.onclick = () => {
                createStory(story);
            }

            let pDom = document.createElement("p");
            pDom.innerText = name;
            itemDom.appendChild(pDom);
        }

        function createStory(data) {

            let selectDom = document.getElementById("select");

            data.forEach(item => {
                const { map, mapunit } = item;
                let itemDom = document.createElement("div");
                itemDom.classList.add("item");
                selectDom.appendChild(itemDom);

                // 地图
                itemDom.appendChild(createStoryMap(map));
                // 触发
                itemDom.appendChild(createStoryMapunit(mapunit));
            });
        }

        // 地图
        function createStoryMap(map) {
            let lineDom = document.createElement("div");
            lineDom.classList.add("line");

            let labelDom = document.createElement("p");
            labelDom.classList.add("label");
            labelDom.innerText = "地图";
            lineDom.appendChild(labelDom);

            let contentDom = document.createElement("p");
            contentDom.classList.add("content");
            contentDom.innerText = map;
            lineDom.appendChild(contentDom);

            return lineDom;
        }

        // 触发
        function createStoryMapunit(mapunit) {
            let lineDom = document.createElement("div");
            lineDom.classList.add("line");

            let labelDom = document.createElement("p");
            labelDom.classList.add("label");
            labelDom.innerText = "触发";
            lineDom.appendChild(labelDom);

            let contentDom = document.createElement("p");
            contentDom.classList.add("content");
            contentDom.innerText = mapunit;
            lineDom.appendChild(contentDom);

            return lineDom;
        }
        function analysis(txt) {
            // 加载xml内容
            let xmlDoc = new DOMParser().parseFromString(txt, "text/xml");

            let story = {}

            // 地图
            let mapTag = xmlDoc.getElementsByTagName("map")[0];
            story.map = mapTag.getAttribute("name");

            // 触发人员
            let mapunitTag = xmlDoc.getElementsByTagName("mapunit")[0];
            story.mapunit = mapunitTag.getAttribute("name");

            // 名称
            let eventTag = mapunitTag.getElementsByTagName("event")[0];
            story.name = eventTag.getAttribute("value");
            story.repeat = eventTag.getAttribute("repeat") === "once";

            // 触发条件
            story.condition = {};
            // 剧情
            story.condition.story = [];
            // 队友
            story.condition.team = [];
            let conditionTags = mapunitTag.getElementsByTagName("condition");
            ;[].forEach.call(conditionTags, conditionTag => {
                let conditionName = conditionTag.getAttribute("value");
                let conditionValue = conditionTag.getAttribute("type");
                if (conditionValue === "should_not_finish" || conditionValue === "should_finish") {
                    story.condition.story.push(
                        {
                            name: conditionName,
                            value: conditionValue === "should_finish"
                        }
                    );
                } else if (conditionValue === "in_team" || conditionValue === "not_in_team") {
                    story.condition.team.push(
                        {
                            name: conditionName,
                            value: conditionValue === "in_team"
                        }
                    );
                }

            });

            // 剧情
            story.story = [];
            // 武功
            story.maxlevel = [];
            // 成就
            story.nick = [];
            // 物品
            story.item = [];
            // 道德
            story.daode = [];
            // 队友
            story.team = [];
            let storyTags = xmlDoc.getElementsByTagName("story");
            ;[].forEach.call(storyTags, storyTag => {
                let name = storyTag.getAttribute("name");
                story.story.push(name);
                let actionTags = storyTag.getElementsByTagName("action");
                ;[].forEach.call(actionTags, actionTag => {
                    let actionType = actionTag.getAttribute("type");
                    let value = actionTag.getAttribute("value");
                    let array = value.split("#");
                    if (array.length > 1) {
                        if (actionType === "MAXLEVEL") {
                            story.maxlevel.push({
                                name: array[0],
                                value: array[1]
                            })
                        } else if (actionType === "ITEM") {
                            story.item.push({
                                name: array[0],
                                value: array[1]
                            })
                        } else if (actionType === "DAODE") {
                            story.daode.push({
                                name: array[0],
                                value: array[1]
                            })
                        }
                    } else {
                        if (actionType === "NICK") {
                            story.nick.push(array[0]);
                        } else if (actionType === "ITEM") {
                            story.item.push({
                                name: array[0],
                                value: 1
                            })
                        } else if (actionType === "JOIN") {
                            story.team.push({
                                name: array[0],
                                value: 1
                            })
                        }
                    }
                })
            })
            console.log(JSON.stringify(story));
        }
    </script>
</body>

</html>